/*
 * @Author: ccccy 459250301@qq.com
 * @Date: 2023-04-09 23:34:49
 * @LastEditors: ccccy 459250301@qq.com
 * @LastEditTime: 2023-04-21 21:33:49
 * @FilePath: \web-frontend-master\src\pages\base\statistics\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import CardChart, { ChartData, ChartType } from "@/components/CardChart";
import { nameSelect , timeSelect} from "@/services/api/billingDetails";
import { waitTime } from "@/utils/request";
import BarChart from "@ant-design/plots/es/components/bar";
import { PageContainer, ProCard, ProFormText, QueryFilter, Search } from "@ant-design/pro-components";
import { Input, Space } from "antd";
import Button from "antd/es/button";
import { number } from "echarts";
import { min } from "moment";
import { useCallback, useState } from "react";




export default () => {
  const { Search } = Input;
  const [chartType, setChartType] = useState<ChartType>('bar');
  const [dataList, setDataList] = useState<ChartData[]>([]);
  function min (a: number,b:number) {
    if(a>b){
      return (b);
    }
    else{
      return (a);
    }
  }
  const OnSearch = async (values: any) => {
    const date1 : API.NameQueryDTO = {
      consumptionName : values ,
    }
    const date = nameSelect(date1);
    const list: ChartData[] = [];
    var temp:any  = (await date).list!//暂存数据
    for (var i = 0; i < temp.length - 1; i++) {
      for (var j = 0; j < temp.length - 1 - i; j++) {
        if (temp[j].consumption < temp[j + 1].consumption) {        // 相邻元素两两对比
          var x = temp[j + 1];        // 元素交换
          temp[j + 1] = temp[j];
          temp[j] = x;
        }
      }
    }
    
    for (var i = 0; i <  min(temp.length,8); i++) {
      list.push({ name: temp[i].consumptionName, value: temp[i].consumption });
    }
    setDataList(list);
  }

  return (
    <PageContainer>
      <Space direction="vertical">
        <Search
          placeholder="输入名称"
          allowClear
          enterButton="查询"
          size="large"
          onSearch={OnSearch}
        />
      </Space>
      <ProCard
        title="名称统计"
        extra={[
          <Button onClick={() => setChartType('bar')}>直方图</Button>,
        ]}
      >

        <CardChart id="mycharts1" chartType={chartType} data={dataList} height={500} />
      </ProCard>
    </PageContainer>
  )
};
